<template>
  <div>
    <!-- 搜索 -->
    <Search ref="search" :fields="searchFields" :search="getList"></Search>

    <el-row>
      <el-col :span="4" v-loading="deptLoading">
        <el-tree :data="deptTree" :props="defaultProps" @node-click="handleNodeClick" :expand-on-click-node="false" default-expand-all highlight-current></el-tree>
      </el-col>
      <el-col :span="20">
        <!-- 表格组件 -->
        <DataTable v-loading="listLoading" :list="listData" :fields="listFields"
            :permissions="$store.state.permissions" :add="toSave"
            :edit="toSave" :del="del" :batchDel="batchDel" :exports="button">
            <slot slot="buttonSlot" slot-scope="scope">
              <el-tooltip content="重置密码" class="operatingButton">
                <el-link
                    type="primary"
                    icon="el-icon-key"
                    :underline="false"
                    v-if="$store.state.permissions.update"
                    @click="toResetPassword(scope.row)"
                  ></el-link>
              </el-tooltip>
            </slot>
        </DataTable>
        <!-- 分页 -->
        <el-pagination style="float:right;margin-top: 10px;" background layout="total, sizes, prev, pager, next"
            :page-sizes="[5, 10, 15, 30]" :page-size="pageSize" :total="total" @current-change="changePage"
            @size-change="changeSize">
        </el-pagination>
      </el-col>
    </el-row>

    <Form ref="form" :title="title" :visible.sync="formVisible" :fields.sync="formFields" :formData="formData" :submitForm="save">
    </Form>
    
    <Form ref="reset-password-form" title="重置密码" :visible.sync="resetPasswordFormVisible" :fields.sync="resetPasswordFormFields" :formData="resetPasswordFormDate" :submitForm="resetPassword">
    </Form>

  </div>
</template>
<script>
export default {
  data() {
    return {
      // 部门树
      deptTree: [],
      defaultProps: {
        children: 'childDepts',
        label: 'deptName'
      },
      deptLoading: false,

      // 查询列表
      searchFields: [
        {
          label: "用户名",
          value: "userName",
          operator: "like"
        },
        {
          label: "状态",
          value: "userStatus",
          operator: "=",
          type: "selector",
          options: [
            {
              label: "正常",
              value: 1
            },
            {
              label: "停用",
              value: 0
            },
          ],
        },
      ],

      //表格
      listLoading: false,
      listData: [],
      listFields: [
        {
          label: "用户名",
          value: "user_name"
        },
        {
          label: "昵称",
          value: "nick_name"
        },
        {
          label: "部门",
          value: "dept_name"
        },
        {
          label: "状态",
          value: "user_status",
          type: "boolean"
        },
        {
          label: "创建时间",
          value: "create_time"
        },
      ],
      
      //分页
      pageSize: 10,
      pageNum: 1,
      total: 0,

      thisDeptCode: "",

      // 表单表头
      title: "",
      // 表单开关
      formVisible: false,
      // 表单字段
      formFields: [
        {
          label: "用户名",
          value: "user_name",
          rules: [{ required: true, message: "用户名不能为空!" }],
          disabled: false,
        },
        {
          label: "昵称",
          value: "nick_name",
          rules: [{ required: true, message: "昵称不能为空!" }],
        },
        {
          label: "部门",
          value: "dept_code",
          rules: [{ required: true, message: "部门不能为空!" }],
          type: "treeSelector",
          options: [],
          defaultProps: {
            children: 'childDepts',
            label: 'deptName'
          },
        },
        {
          label: "角色",
          value: "role_code",
          rules: [{ required: true, message: "角色不能为空!" }],
          type: "multipleSelector",
          options: [],
          optionsLabel: "role_name",
          optionsValue: "role_code",
        },
        {
          label: "状态",
          value: "user_status",
          type: "radio",
          options: [
            {
              label:"正常",
              value: 1
            },
            {
              label:"停用",
              value: 0
            }
          ],
        },
      ],
      // 表单数据
      formData: {},
      
      // 重置密码表单
      resetPasswordFormVisible: false,
      resetPasswordFormFields:[
        {
          label: "新密码",
          value: "newPassword",
          rules: [{ required: true, message: "新密码不能为空!" }],
          disabled: false,
        },
      ],
      resetPasswordFormDate:{},
    };
  },
  mounted() {
    this.getDeptTree();
    this.getDeptTree2();
    this.getRoleList();
    this.getList();
  },
  methods: {
    button(){},
    // 重置密码
    resetPassword(){
      this.$api.user.reset(this.resetPasswordFormDate).then(res=>{
        if(res.code == 200){
          this.$message.success("操作成功")
          this.resetPasswordFormVisible = false;
        }else{
          this.$message.error(res.msg);
        }
      })
    },
    // 打开重置密码
    toResetPassword(row){
      this.resetPasswordFormDate = {
        uuid: row.uuid,
        userName: row.user_name
      };
      this.resetPasswordFormVisible = true;
    },
    // 保存表单
    save(){
      this.$api.user.save(this.formData).then(res=>{
        if(res.code == 200){
          this.$message.success("操作成功")
          this.formVisible = false;
          this.$refs.search.search(this.$refs.search.param);
        }else{
          this.$message.error(res.msg);
          this.$refs.form.saveLoading = false;
        }
      })
    },
    // 打开新增|修改表单
    toSave(uuid){
      this.formData = {
        user_status: 1
      };
      if (uuid) {
        let vo = {
          objectCode: "sys_user",
          uuid: uuid
        }
        this.$api.baseData.detail(vo).then(res => {
          if (res.code == 200) {
            this.formData = res.data;
            this.updateInit = true;
          }
        })
        this.formFields[0].disabled = true;
        this.title = "修改"
      } else {
        this.formFields[0].disabled = false;
        this.title = "新增"
      }
      this.formVisible = true;
    },
    del(uuid){
      let vo = {
        objectCode: "sys_user",
        conditions: [
          {
            fieldCode: "uuid",
            operator: "=",
            value: uuid,
          }
        ]
      }
      this.$api.baseData.del(vo).then(res=>{
        if(res.code == 200){
          this.$message.success(res.msg);
          this.$refs.search.search(this.$refs.search.param);
        }else{
          this.$message.error(res.msg)
        }
      })
    },
    batchDel(uuids){
      let vo = {
        objectCode: "sys_user",
        conditions: [
          {
            fieldCode: "uuid",
            operator: "in",
            value: uuids,
          }
        ]
      }
      this.$api.baseData.del(vo).then(res=>{
        if(res.code == 200){
          this.$message.success(res.msg);
          this.$refs.search.search(this.$refs.search.param);
        }else{
          this.$message.error(res.msg)
        }
      })
    },
    // 获取用户列表
    getList(param){
      this.listLoading = true;

      let body = {
        userName: param?param.userName:undefined,
        userStatus: param?param.userStatus:undefined,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        deptCode: this.thisDeptCode,
      }

      this.$api.user.getList(body).then(res => {
        if (res.code == 200) {
          this.listData = res.data.list;
          this.pageNum = res.data.pageNum;
          this.total = res.data.total;
        }
        this.listLoading = false;
      });
    },
    // 获取角色列表
    getRoleList(){
      let vo = {
        objectCode: "sys_role",
        page: {
          page: false
        },
        enableDataIsolation: false,
      };
      this.$api.baseData.list(vo).then(res => {
        if (res.code == 200) {
          this.formFields[3].options = res.data.list;
        }
      });
    },
    // 切换每页大小
    changeSize(pageSize) {
      this.pageSize = pageSize;
      this.$refs.search.search(this.$refs.search.param);
    },
    // 切换页码
    changePage(pageNum) {
      this.pageNum = pageNum;
      this.$refs.search.search(this.$refs.search.param);
    },
    // 切换部门
    handleNodeClick(dept) {
      this.thisDeptCode = dept.deptCode;
      this.$refs.search.search(this.$refs.search.param);
    },
    // 获取部门树
    getDeptTree(){
      this.deptLoading = true;
      this.$api.dept.getList().then((res) => {
        if (res.code == 200) {
          this.deptTree = res.data;
        } else {
          this.$message.error(res.msg);
        }
        this.deptLoading = false;
      });
    },
    getDeptTree2(){
      this.$api.dept.getTree().then((res) => {
        if (res.code == 200) {
          this.formFields[2].options = res.data;
        }
      });
    }
  },
};
</script>

<style>

</style>